<template>
    <div class="list">      
        <el-row>
            <el-col :span="12" :offset="18">
                <el-button type="primary" icon="plus" @click="addQuestion">添加题型</el-button>
            </el-col>
        </el-row>
        <div class="divline"></div>

        <el-row v-for="(topicRow, index) in topicList" >
          <div class="divcol">  
            <el-col :span="4" v-for="(topic, index1) in topicRow"  :offset="1">
              <el-card :body-style="{padding: '10px'}">
                <img src="../../../../../assets/2.png" class="image">
                <div style="padding: 5px;">
                  <p style="text-align:center">{{ topic.title }}</p>
                  <div class="bottom clearfix">
                    <time class="time">{{ topic.desc }}</time>
                    <el-button-group class="button">
                      <el-button type="primary" size="small" icon="edit" @click="updateQuestion(topic)">编辑</el-button>
                      <el-button type="primary" size="small" icon="delete" @click="deleteQuestion(topic)">删除</el-button>
                    </el-button-group>                    
                  </div>
                </div>
              </el-card>
            </el-col>
          </div>
        </el-row>
    </div>
</template>

<script>
    import TopicsJs from './Topics.js';
    module.exports = TopicsJs;
</script>

<style scoped>
  .divcol {
    margin-top: 15px; 
  }

  .time {
    display: block;
    color: #999;
    font-size: 12px;
    margin-bottom: 5px;
  }
  
  .bottom {
    margin-top: 20px;
    line-height: 20px;
  }

  .button {
    padding: 10;
    float: right;
  }

  .image {
    width  : 100px;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }

  .divline {
    margin-top: 10px;
    height:1px;
    width:100%;
    background:#999;
    overflow:hidden;
  } 
</style>